<template>
    <div class="problemData">
        <div class="header flexbetween">
            <div class="flex-center">
                <span class="title">数据范围</span>
                <el-radio-group v-model="time" size="small" class="mr20" @change="radioTimeChange">
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="1">昨天</el-radio-button>
                    <el-radio-button label="7">近一周</el-radio-button>
                    <el-radio-button label="30">近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker class="mr20" v-model="date" size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="dateRangeChange">
                </el-date-picker>
                <div class="mr20">渠道入口</div>
                <a-select v-model="sourceIds" style="width: 300px" mode="multiple" @change="getChartData"
                          :getPopupContainer="triggerNode => { return triggerNode.parentNode }">
                    <a-select-option v-for="source in sourceList" :key="source.id" :value="source.id">
                        {{ source.sourceName }}
                    </a-select-option>
                </a-select>
            </div>
            <span class="hint">仅支持查询近90天的数据</span>
        </div>
        <div class="flexbetween betweenCard mb20">
            <div class="card">
                <div class="card-header flexbetween">
                    <span class="title">问题类型匹配率</span>
                    <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                        <span class="iconfont icon-xiazai" @click="exportQueData('exportReplyType')"></span>
                    </el-tooltip>
                </div>
                <div class="card-body">
                    <echarts :optionData="typePieOption"></echarts>
                </div>
            </div>
            <div class="card">
                <div class="card-header flexbetween">
                    <span class="title">未知问题统计</span>
                    <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                        <span class="iconfont icon-xiazai" @click="exportQueData('exportUnknown')"></span>
                    </el-tooltip>
                </div>
                <div class="card-body" style="display: flex">
                    <div class="charts">
                        <echarts :optionData="quePieOption"></echarts>
                    </div>
                    <div class="topCount">
                        <p class="title">TOP10</p>
                        <div class="topList">
                            <p class="item" v-for="(item,i) in queTopList" :key="i">
                                <span :class="['iconfont', 'icon-paimingdiyi', `paiming${i}`]" v-if="i <= 2"></span>
                                {{item.name}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card mb20">
            <div class="card-header flexbetween">
                <span class="title">未知问题数据趋势图</span>
                <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                    <span class="iconfont icon-xiazai" @click="exportQueData('exportUnknownTrend')"></span>
                </el-tooltip>
            </div>
            <div class="card-body" style="height: 380px">
                <echarts :optionData="lineOption"></echarts>
            </div>
        </div>

        <!-- 导出 -->
        <exportExcel ref="exportExcel"></exportExcel>
    </div>
</template>

<script>
import echarts from "@/components/Echarts";
import { getPieOption, getLineOption } from "@/components/Echarts/option";
import exportExcel from "@/components/exportExcel";
import { initFilterTime } from "@/utils/index";
import { mapGetters } from "vuex";
import { queReplyType, queUnknown, queUnknownTrend, exportQueData } from "@/api/robotReport";
export default {
    name: "problemData",
    data() {
        return {
            time: "0",
            date: "",
            sourceIds: [],
            pickerOptions: {
                disabledDate(time) {
                    let curDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
                    let three = 90 * 24 * 3600 * 1000;
                    let threeMonths = curDate - three;
                    return time.getTime() > curDate || time.getTime() < threeMonths;;
                }
            },
            quePieOption: { yAxis: { axisLine: { show: false } } },
            typePieOption: { yAxis: { axisLine: { show: false } } },
            lineOption: {},
            queList: []
        }
    },
    methods: {
        getChartData() {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            queReplyType(param).then(resp => {
                if (resp.status == 0) {
                    this.getDireData(resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
            queUnknown(param).then(resp => {
                if (resp.status == 0) {
                    this.getQueData(resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
            queUnknownTrend(param).then(resp => {
                if (resp.status == 0) {
                    var { questionUnknownIncrease: increase,
                        questionUnknownUntreated: untreated,
                        questionUnknownSum: sum, dateList } = resp.data;
                    var date = [];
                    dateList.forEach((item) => { date.push(item.substring(5)) });
                    this.getlineData(sum, untreated, increase, date);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        getQueData(dataList = []) {
            dataList = JSON.parse(JSON.stringify(dataList).replace(/question/g, 'name').replace(/ratio/g, 'value'));
            this.queList = (dataList.sort((a, b) => { return b.value - a.value }));
            let quePieOption = {
                series: [{ data: dataList }]
            };
            this.quePieOption = getPieOption(quePieOption);
        },
        getDireData(data = {}) {
            let pieOption = {
                series: [
                    {
                        data: [
                            { value: data.replyStraightRatio, name: '直接回复' },
                            { value: data.replyGuideRatio, name: '引导回复' },
                            { value: data.replyUnknownRatio, name: '未知回复' },
                            { value: data.replyGossipRatio, name: '寒暄回复' }
                        ]
                    }
                ]
            };
            this.typePieOption = getPieOption(pieOption);
        },
        getlineData(sum, untreated, increase, dateList = []) {
            let lineOption = {
                legend: { data: ['未知问题总数', '未知问题未处理数量', '新增未知问题数量'] },
                dataZoom: [{ show: dateList.length > 31 }],
                grid: { bottom: dateList.length > 31 ? "30px" : "0%" },
                xAxis: { data: dateList },
                series: [
                    {
                        name: '未知问题总数',
                        type: 'line',
                        color: "#FF9A84",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(255, 154, 132,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: sum
                    },
                    {
                        name: '未知问题未处理数量',
                        type: 'line',
                        color: "#6B5EE2",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(142, 121, 255,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: untreated
                    },
                    {
                        name: '新增未知问题数量',
                        type: 'line',
                        color: "#0EB8D8",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(14, 184, 216,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: increase
                    }
                ]
            };
            this.lineOption = getLineOption(lineOption);
        },
        radioTimeChange(val) {
            this.date = initFilterTime(val);
            this.getChartData();
        },
        dateRangeChange() {
            this.time = "";
            this.getChartData();
        },
        exportQueData(type) {
            if (!this.date) {
                return this.$antMessage.warning("请选择日期");
            }
            var param = {
                startDate: this.date[0],
                endDate: this.date[1],
                sourceIds: this.sourceIds
            }
            var fileName = {
                exportReplyType: "问题类型匹配率",
                exportUnknown: "未知问题统计",
                exportUnknownTrend: "未知问题数据趋势图"
            }
            var url = "/v1/admin/statistic/question/" + type;
            this.$refs.exportExcel.showLoading();
            exportQueData(url, param).then(resp => {
                this.$refs.exportExcel.closeLoading();
                if (resp.status == 0) {
                    this.$refs.exportExcel.exports(fileName[type], resp.data);
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        }
    },
    created() {
        this.date = initFilterTime(0);
        this.getlineData();
        this.getChartData();
    },
    computed: {
        ...mapGetters(["sourceList"]),
        queTopList() {
            return this.queList.slice(0, 10);
        }
    },
    components: {
        echarts,
        exportExcel
    }
}
</script>

<style lang="scss">
.problemData {
    .betweenCard {
        .card-body {
            height: 450px;
            .charts {
                width: 70%;
            }
        }
    }
}
</style>